<template>
  <div class='container'>
    <el-card class="box-card" shadow="never">
      <!-- 搜索 -->
      <el-form>
        <el-row>
          <el-col :span="8">
            <el-form-item label="学科名称">
              <el-input style="width: 234px;" v-model="search.subjectName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button @click="handleClear">清除</el-button>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-col>
          <el-col :span="8">
            <span style="float:right">
              <el-button size="small" style="margin-left: 10px;" type="success" icon="el-icon-edit" @click="handleUpdate(0)">新增学科</el-button>
            </span>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据记录 -->
      <el-alert :title="alertText" type="info" class="alert" :closable="false" show-icon></el-alert>
      <!-- 数据列表 -->
      <el-table :data="dataList">
        <el-table-column align="center" label="序号" type="index" :index="handleIndex" width="80"></el-table-column>
        <el-table-column align="center" label="学科名称" width="100">
          <template v-slot={row}>
            <span>{{row.subjectName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建者" width="120" :formatter="formatType">
        </el-table-column>
        <el-table-column align="center" label="创建日期" width="200" :formatter="formatDate">
        </el-table-column>
        <el-table-column align="center" label="前台是否显示" width="120" :formatter="formatDisplay">
        </el-table-column>
        <el-table-column align="center" label="二级目录" width="90">
          <template v-slot={row}>
            <span>{{row.twoLevelDirectory}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签" width="90">
          <template v-slot={row}>
            <span>{{row.tags}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="题目数量" width="100">
          <template v-slot={row}>
            <span>{{row.totals}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot={row}>
            <el-button type="text" @click="$router.push(`/subjects/directorys?${row.id}&${row.subjectName}`)">学科分类</el-button>
            <el-button type="text" @click="$router.push(`/subjects/tags?${row.id}&${row.subjectName}`)">学科标签</el-button>
            <el-button type="text" @click="handleUpdate(row.id)">修改</el-button>
            <el-button type="text" @click="handleDel(row)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <div class="pages">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="Number(queryParams.page)" :total="Number(total)" :page-size="Number(queryParams.pagesize)" :page-sizes="[5,10,20,30]" layout="->,sizes, prev, pager, next, jumper"></el-pagination>
        </div>
      </div>
    </el-card>

    <!-- 弹窗子组件 -->
    <SubjectsAdd :show-dialog.sync="showDialog" :subjects-id="subjectsId"></SubjectsAdd>
  </div>
</template>

<script>
import { list, remove } from '../../api/hmmm/subjects'
import moment from 'moment'
import { manager, display } from '../../api/hmmm/constants'
import SubjectsAdd from './../components/subjects-add.vue'
export default {
  name: 'SubjectsList',
  components: {
    SubjectsAdd
  },
  data () {
    return {
      // 新增弹窗标志位
      showDialog: false,
      // 分页数据
      queryParams: {
        page: 1,
        pagesize: 10
      },
      // 数据列表
      dataList: [],
      // 提示文字
      alertText: '',
      // 总数
      total: '',
      // 学科
      search: {
        subjectName: ''
      },
      // 父传子
      subjectsId: 0
    }
  },
  created () {
    this.loadDataList()
  },
  methods: {
    // 功能1：加载数据列表
    async loadDataList () {
      try {
        const ret = await list(this.queryParams)
        if (ret.status === 200) {
          // 调用成功，加载数据
          this.dataList = ret.data.items
          this.total = ret.data.counts
          this.alertText = `数据一共${this.total}条`
        } else {
          this.$message.error('加载学科列表失败')
        }
      } catch {
        this.$message.error('加载学科列表失败')
      }
    },
    // 功能2：动态索引序号
    handleIndex (index) {
      const { page, pagesize } = this.queryParams
      return (page - 1) * pagesize + index + 1
    },
    // 功能3：格式化时间
    formatDate (date) {
      // console.log(date)
      if (!date.addDate) return ''
      return moment(date.addDate).format('YYYY-MM-DD  hh:mm:ss')
    },
    // 功能4：格式化录入人
    formatType (row) {
      const info = manager.find(item => parseInt(item.value) === parseInt(row.creatorID))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 功能5：格式化前台是否显示
    formatDisplay (row) {
      const info = display.find(item => parseInt(item.value) === parseInt(row.isFrontDisplay))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 功能6：删除
    async handleDel (row) {
      const ret = await this.$confirm('确认删除此学科吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (ret === 'cancel') return
      try {
        const retDel = await remove(row)
        if (retDel.status === 200) {
          // 删除成功
          this.loadDataList()
          this.$message.success('删除成功')
        } else {
          this.$message.error('删除学科失败')
        }
      } catch {
        this.$message.error('删除学科失败')
      }
    },
    // 功能7：分页
    // 7-1 每页显示信息条数
    handleSizeChange (val) {
      this.queryParams.pagesize = val
      if (this.queryParams.page === 1) {
        this.loadDataList(this.queryParams)
      }
    },
    // 7-2 进入某一页
    handleCurrentChange (val) {
      this.queryParams.page = val
      this.loadDataList()
    },
    // 功能8：修改
    async handleUpdate (id) {
      this.showDialog = true
      this.subjectsId = id
    },
    // 功能9：搜索
    async handleSearch () {
      if (this.search.subjectName === '') {
        this.loadDataList()
      }
      const ret = await list({
        ...this.queryParams,
        ...this.search
      })
      if (ret.status === 200) {
        this.dataList = ret.data.items
        this.total = ret.data.counts
        this.alertText = `数据一共${this.total}条`
      }
    },
    // 功能10：清除
    handleClear () {
      this.search.subjectName = ''
      this.loadDataList()
    }
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 10px;
}
</style>
